<template>
  <div class="dc-page-design-center">
    <div class="dc-page-design-c-t">
      <el-button :icon="View" type="text">
        查看json
      </el-button>
      <el-button class="dc-delete-btn" :icon="Delete" type="text">
        清空
      </el-button>
    </div>

    <!-- 内容区 -->
    <div class="dc-page-design-c-s dc-draggable-container" ref="refDraggable">
      <div v-if="drawingList.length === 0" class="dc-page-design-c-n">
        从左侧拖入或单击组件进行表单设计
      </div>
      <!-- 拖入进来的组件列表 -->
      <template v-else>
        <center-item v-for="item in drawingList" :key="item.id" class="dc-draggable-handler" :data="item" />
      </template>
    </div>
  </div>
</template>

<script setup name="CenterPanel">
import CenterItem from './center-item.vue'
// import CenterRender from './center-render.jsx'
import { Delete, View } from "@element-plus/icons-vue";
import { inject, ref, useTemplateRef } from 'vue'
import { useDraggable } from 'vue-draggable-plus'

// Props
defineProps({
  activeData: {
    type: Object,
    default: () => ({})
  }
})

// Emits
const emit = defineEmits(['active-comp', 'copy-comp'])
// 从父级inject获取
const drawingList = inject('drawingList')
const refDraggable = useTemplateRef('refDraggable')
useDraggable(refDraggable, drawingList, {
  animation: 150,
  ghostClass: 'dc-draggable-ghost',
  group: 'draggableGroup',
  dragClass: 'dc-draggable-class',
  handle: '.dc-draggable-handler',
  onAdd (event) {
    console.log('center-panel', 'onAdd', event)
    // if (!event.clonedData) {
    //   return
    // }
    // // @ts-ignore
    // if (!event.clonedData.id) {
    //   // @ts-ignore
    //   event.clonedData.id = new Date().getTime()
    //   // @ts-ignore
    //   event.clonedData.name += 'Copy'
    // }
  },
  onRemove (event) {
    console.log('center-panel', 'onRemove', event)
  }
})
</script>

<style lang='scss' scoped>
</style>
